{% extends 'base_dashboard.html' %}
{% load site_tags %}

{% block title %}Complete Payment — {{ site_settings.institute_name }}{% endblock %}

{% block extra_css %}
<style>
  .pay-hero {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 1rem;
    padding: 1.15rem 1.35rem;
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.25rem;
  }
  .pay-hero-icon {
    width: 48px; height: 48px; border-radius: .75rem; background: #1e40af;
    display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0;
  }
  .pay-option {
    border: 1.5px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.25rem;
    height: 100%;
    background: #fff;
  }
  .pay-option.stripe { border-color: #c7d2fe; background: linear-gradient(180deg,#fff,#f5f3ff); }
  .pay-option.manual { border-color: #bfdbfe; background: linear-gradient(180deg,#fff,#f0f9ff); }
  .up-drop-zone {
    background: #f8faff; border: 2px dashed #bfdbfe;
    border-radius: .75rem; padding: 1.1rem 1rem; text-align: center; margin-bottom: .5rem;
  }
  .instructions-box {
    white-space: pre-line;
    background: #fffbeb; color: #92400e; border: 1px solid #fde68a;
    border-radius: .75rem; padding: .85rem 1rem; font-size: .875rem;
  }
</style>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-9 col-xl-8">
    <div class="d-flex justify-content-between align-items-start mb-3 gap-2 flex-wrap">
      <div>
        <h4 class="fw-bold mb-1">Complete payment</h4>
        <p class="text-muted small mb-0">Activate your course by paying with an available method below.</p>
      </div>
      <a href="{% url 'enrollments:my_enrollments' %}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left me-1"></i>My Enrollments
      </a>
    </div>

    <div class="pay-hero">
      <div class="pay-hero-icon"><i class="bi bi-mortarboard-fill"></i></div>
      <div class="flex-grow-1">
        <div class="fw-semibold">{{ object.course.title }}</div>
        <div class="text-muted small">
          {% if object.promo_code %}
            <span class="text-decoration-line-through me-1">{% format_price list_price %}</span>
            <strong class="text-success">{% format_price amount_due %}</strong>
            <span class="badge text-bg-success ms-1">{{ object.promo_code.code }}</span>
          {% elif list_price > 0 %}
            Fee: {% format_price amount_due %}
          {% else %}
            Free course
          {% endif %}
        </div>
      </div>
      <span class="badge bg-warning-subtle text-warning-emphasis border">Pending</span>
    </div>

    <div class="card border-0 shadow-sm rounded-4 mb-3">
      <div class="card-body p-3">
        <div class="fw-semibold small mb-2"><i class="bi bi-tag me-1"></i>College / university promo code</div>
        {% if object.promo_code %}
          <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div class="small">
              Applied <strong class="font-monospace">{{ object.promo_code.code }}</strong>
              for {{ object.promo_code.institute_name }}
              ({{ object.promo_code.discount_label }} · saved {% format_price object.discount_amount %})
            </div>
            <form method="post" action="{% url 'enrollments:clear_promo' object.pk %}">
              {% csrf_token %}
              <button class="btn btn-sm btn-outline-secondary">Remove</button>
            </form>
          </div>
        {% else %}
          <form method="post" action="{% url 'enrollments:apply_promo' object.pk %}" class="row g-2 align-items-end">
            {% csrf_token %}
            <div class="col-md-8">
              <input type="text" name="code" class="form-control text-uppercase" placeholder="Enter promo code" required>
            </div>
            <div class="col-md-4">
              <button class="btn btn-outline-primary w-100">Apply</button>
            </div>
          </form>
        {% endif %}
      </div>
    </div>

    {% if not manual_enabled and not stripe_enabled %}
      <div class="alert alert-warning">
        No payment methods are enabled. Please contact the academy admin.
      </div>
    {% endif %}

    <div class="row g-3">
      {% if stripe_enabled %}
      <div class="col-md-{% if manual_enabled %}6{% else %}12{% endif %}">
        <div class="pay-option stripe">
          <div class="d-flex align-items-center gap-2 mb-2">
            <i class="bi bi-credit-card-2-front fs-4 text-primary"></i>
            <div>
              <div class="fw-bold">Pay with Stripe</div>
              <div class="text-muted small">Card payment · instant activation</div>
            </div>
          </div>
          <p class="small text-muted mb-3">You'll be redirected to Stripe Checkout. After a successful payment, your course unlocks automatically.</p>
          <form method="post" action="{% url 'enrollments:stripe_checkout' object.pk %}">
            {% csrf_token %}
            <button type="submit" class="btn btn-primary w-100 fw-semibold">
              <i class="bi bi-lock-fill me-1"></i>Pay {% format_price amount_due %} securely
            </button>
          </form>
        </div>
      </div>
      {% endif %}

      {% if manual_enabled %}
      <div class="col-md-{% if stripe_enabled %}6{% else %}12{% endif %}">
        <div class="pay-option manual">
          <div class="d-flex align-items-center gap-2 mb-2">
            <i class="bi bi-receipt fs-4 text-primary"></i>
            <div>
              <div class="fw-bold">Manual payment</div>
              <div class="text-muted small">Transfer + upload proof · admin approval</div>
            </div>
          </div>

          {% if site.manual_payment_instructions %}
            <div class="instructions-box mb-3">{{ site.manual_payment_instructions }}</div>
          {% endif %}

          <form method="post" enctype="multipart/form-data" novalidate>
            {% csrf_token %}
            <div class="mb-3">
              <label class="form-label fw-medium small">Payment proof <span class="text-danger">*</span></label>
              <div class="up-drop-zone">
                <i class="bi bi-cloud-upload text-primary mb-1" style="font-size:1.6rem;"></i>
                <div class="small text-muted">Screenshot or receipt image</div>
              </div>
              {{ form.payment_proof }}
              {% if form.payment_proof.errors %}
                <div class="text-danger small mt-1">{{ form.payment_proof.errors.0 }}</div>
              {% endif %}
            </div>
            <div class="mb-3">
              <label class="form-label fw-medium small">Note <small class="text-muted">(optional)</small></label>
              {{ form.payment_note }}
            </div>
            <button type="submit" class="btn btn-outline-primary w-100 fw-semibold">
              <i class="bi bi-cloud-upload me-1"></i>Submit payment proof
            </button>
          </form>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}